<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Editar universidad</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	
	{% load staticfiles %} <link rel="stylesheet" href="{% static "css/spacelab.css" %}">
	{% load staticfiles %} <link rel="stylesheet" href="{% static "css/responsive.css" %}">
	{% load staticfiles %} <link rel="stylesheet" href="{% static "css/misestilos.css" %}"> 
	{% load staticfiles %} <link rel="stylesheet" href="{% static "css/menu_jquery.css" %}">
</head>
<body>

	{% include "topmenu.html" %} <!-- Top menu -->

	<div class="container">
		<div class="row-fluid">
			
			{% include "sidebar.html" %} <!-- Side bar -->
			<!-- Listado de universidades divididas por regiones -->
			<div class="span9">
				{% if show_message_success %}
                <div class="alert alert-success">
					<button type="button" class="close" data-dismiss="alert">&times;</button>
					{{mensaje_exito|safe}}                
                </div>
	            {% endif %}
	            {% if show_message_error %}
	            	<div class="alert alert-error">
						<button type="button" class="close" data-dismiss="alert">&times;</button>
						{{mensaje_error|safe}}                
	                </div>
	            {% endif %}

	            <div class="page-header">
					<h1>Editar Universidad</h1>
				</div>
				<small><b>Campos con (*) son de caracter obligatorio para el registro.</b></small>

				<!-- Universidades participantes agrupadas por region -->
				<form action="/plataforma/universidades/edicion_universidades/" method="post" name="registro" id ="registro">
					<div class="form-horizontal well"> 
						<div class="control-group"><!-- Nombre -->
							<label for="nombre" class="control-label"><b>Nombre*</b></label>
							<div class="controls">
								<input type="text" name="name" id = "name" value="{{universidades_nombre}}" class="textarea_editar_univ">
							<div class="nameAlert"></div>
							</div>
						</div> <!-- Nombre -->

						<div class="control-group"> <!-- Telefono -->
	                        <label for="telefono" class="control-label"><b>Teléfono</b></label>
	                        <div class="controls">
	                                <input type="text" name="cod_pais" id ="cod_pais" class="textarea_editar_univ_tel" value ="{{cod_pais}}" placeholder="Cod.País">
	                                <input type="text" name="cod_ciudad" id ="cod_ciudad" class="textarea_editar_univ_tel" value ="{{cod_ciudad}}" placeholder="Cod. Área">
	                                <input type="text" name="telefono" id ="telefono" class="textarea_editar_univ" value = "{{telefono}}" placeholder="Num. Tel.">
	                        </div>
	                    </div> <!-- /Telefono -->

						<div class="control-group"><!-- URL -->
							<label for="url" class="control-label"><b>URL*</b></label>
							<div class="controls">
								<input type="text" name="URL" id = "URL" placeholder="www.ejemplo.com" value="{{url}}" onBlur="javascript:ajax_message_url(event)" class="textarea_editar_univ">
								<input type="hidden" name="url" id = "url" value="{{url}}" required>
								<div class="result_url"></div>
							</div>
						</div> <!-- URL -->

						<div class="control-group"> <!-- Pais -->
	                        <label for="paises" class="control-label"><b>Pais*</b></label>
	                        <div class="controls">
                                <select name="paises" id = "paises" class="selectarea_editar_univ">
                                    {% for nombre, codigo in lista_sinc_paises %}
                                        {%if nombre == pais%}
                                        	<option selected="selected" value="{{ nombre }}">{{ codigo }}</option>
                                        {%else%}	
                                            <option value="{{ nombre }}">{{ codigo }}</option>
                                        {%endif%}
                                    {% endfor %}
                                </select>
	                        </div>
                		</div> <!-- /Pais -->
						
						<div class="control-group"><!-- Administrador -->
							<label for="administrador" class="control-label"><b>Administrador*</b></label>
							<div class="controls">
								<select name="administrador" id = "administrador" class="selectarea_editar_univ">
									{% for id_user, nombre_user in usuarios %}
										{% if id_user == idadministrador %}
											<option selected="selected" value="{{id_user}}">{{nombre_user}}</option>
										{% else %}
											<option value="{{id_user}}">{{nombre_user}}</option>
										{% endif %}
									{%endfor%}
								</select>
							</div>
						</div> <!-- Administrador -->

						<div class="control-group"><!-- Siglas -->
							<label for="nombre" class="control-label"><b>Siglas</b></label>
							<div class="controls">
								<input type="text" name="sigla" id = "sigla" value="{{siglas}}" class="textarea_editar_univ">
							</div>
						</div> <!-- Siglas -->

						<div class="control-group"><!--Direccion -->
							<label for="nombre" class="control-label"><b>Dirección</b></label>
							<div class="controls">
								<input type="text" name="Direccion" id = "Direccion" value="{{direccion}}" class="textarea_editar_univ">
							</div>
						</div> <!--Direccion -->

						{% csrf_token %}

						<div class="control-group">
							<div class="controls">
								<input type="hidden" name="id" id = "id" value="{{iduniversidad}}" required>
							</div>
						</div> <!-- ID -->

						<div class="control-group">
							<div class="controls">
								<input type="hidden" name="region" id = "region" value="{{region_id}}" required>
							</div>
						</div> <!-- region -->

						<div class="form-actions" align="center">
							<button type="submit" class="btn btn-primary" onClick="javascript:myfunc(event)">Guardar</button>
						</div> <!-- Botones de opciones -->
						
					</div>
				</form> <!-- form -->
			</div>
		</div> <!-- /row -->

	{% include "footer.html" %} <!-- Footer -->
	</div> <!-- /container -->

	<!-- JS files -->
	{% load staticfiles %} <script type="text/javascript" src="{% static "js/jquery.js" %}"></script>
	{% load staticfiles %} <script type="text/javascript" src="{% static "js/bootstrap.js" %}"></script>
        {% load staticfiles %} <script type="text/javascript" src="{% static "js/menu_jquery.js" %}"></script>
	<script>
	function myfunc(event){
		url = $("#URL").val();
		if($("#name").val() == ""){
			$(".nameAlert").html("<div class='alert alert-error'>Ingrese un nombre para la universidad.</div>");
			event.preventDefault();
		}
		if($("#URL").val() == ""){
			$(".result_url").html("<div class='alert alert-error'>Ingrese una url válida para la universidad.</div>");
			event.preventDefault();
		}
		if(validateUrlFormat(url)){
			$("#registro").attr("action", "/plataforma/universidades/edicion_universidades/"+$("#id").val()+"/"+$("#administrador").val()+"/"+$("#region").val()+"/");
		  	$("#registro").submit();
		}else{
	    	$(".result_url").html("<div class='alert alert-error'>Ingrese una url válida para la universidad.</div>");
			event.preventDefault();
		}
	}	
	//***********************
	function ajax_message_url() {
	    $(".result_url").html("");
	    url = $("#URL").val();
	    if((url != $("#url").val()) && validateUrlFormat(url)){	
		    $.ajax({
		       type: "POST",
		       url: "/plataforma/universidades/ajax_message_url/",
		       data: {'url': url},
		       cache: false,
		       success: function(returndata){
		             if(returndata.tipo == "error")
		             	$(".result_url").html("<div class='alert alert-error'>"+returndata.message+"</div>");
		             else if(returndata.tipo == "exito")
		             	$(".result_url").html("<div class='alert alert-success'>"+returndata.message+"</div>");
		       }
		    });
	    }else if(!validateUrlFormat(url)){
	    	$(".result_url").html("<div class='alert alert-error'>Ingrese una url válida para la universidad.</div>");
	    }
	}
	//*************************
	function validateUrlFormat(url) { 
	    var re = /^((http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/|www\.)[a-zA-Z0-9\-]+(?:\.[a-zA-Z0-9\-]+)*\.[a-zA-Z]{2,6}(?:\/?|(?:\/[\w\-]+)*)(?:\/?|\/\w+\.[a-zA-Z]{2,4}(?:\?[\w]+\=[\w\-]+)?)?(?:\&[\w]+\=[\w\-]+)*)$/;
	    return re.test(url);
	}
	//***********************	
	/*$("#URL").focus(function(){
		$(".result_url").html("");
	});*/
	$("#name").blur(function(){
		if($("#name").val() == ""){
			$(".nameAlert").html("<div class='alert alert-error'>Ingrese un nombre para la universidad.</div>");
		}else{
			$(".nameAlert").html("");
		}
	});
	 
	</script>
</body>
</html>